前言

今天的目標是讓每一次呼吸練習都留下紀錄，並以視覺化的方式呈現。昨天完成的是「練習本身」：選感受、選方法、跟著呼吸。但練完就結束的話，看不到自己長期練習的累積。紀錄頁是這個 App 的第二個核心，讓自己能持續練習下去。

開發進度更新

呼吸練習紀錄視覺化
今天請 Claude Code 幫我實作呼吸練習紀錄的視覺化功能。目前已經完成了第一個版本，同步 UI 與大家分享。

修正背景造成的文字可讀性問題
昨天試做第一版時，發現背景影響了文字的可讀性，因此重新調整介面設計。我最初想直接調整背景顏色，這是最直接的改善方式。但實作完第一個版本後，我認為：

1. 換頁呈現 VS 底部卡片
   • 考量原因：選完感受後，接下來只是選擇對應的呼吸法和練習時間，這是一個延續當前情境的簡單設定任務。我認為不需要為此切換到獨立頁面，讓使用者在保留首頁脈絡的情況下完成設定。
2. 不同感受對應的呼吸法數量不同。當畫面只有一種呼吸法時，整頁會留下大量空白，版面看起來比較鬆散。
3. 有時焦慮與睡意會同時出現。如果我想改選當下更強烈的感受，就得回到上一頁重新選擇。

綜合這三項問題，我想試著用從底部彈出的卡片，呈現呼吸法的選擇與設定流程。在研究 Apple 官方 iOS 設計指南時，我認為 Sheet 這個元件（參考 Apple 官方設計文件） 蠻符合我的需求。

Sheet 元件使用時機

Sheet 適合讓使用者完成與當前情境相關的簡短任務，再回到原本的畫面。

A sheet is useful for requesting specific information from people or presenting a simple task that they can complete before returning to the parent view. For example, a sheet might let people supply information needed to complete an action, such as attaching a file or choosing a location to save it.

基於這樣的優點與版面的考量，我請 Claude Code 協助，試著用 Sheet 重新設計這段操作流程。實際操作後，我認為新版有以下幾個改善：

1. 選完一種感受後，Sheet 會從畫面底部滑出，向下滑動即可關閉，操作起來更流暢。
2. 提供當前感受資訊和對應的呼吸練習方式，同時若想更換感受，直接點擊其他按鈕快速切換感受進行不同的呼吸練習。
3. UI 資訊排版可以更整齊密集，不會有鬆散的留白空間。

修改前後的 UI 對照

Day 17 預告

Claude Code 寫的程式我大多看不懂XD。但在開發過程中學到一個概念：定義驗收標準，然後讓 AI 先自己做、自己測、自己驗，才不用讓我一直在對話視窗中跟它浪費時間，來回溝通確認。明天分享開發過程中怎和 AI 討論驗收這件事情。

明天見，Cheers! 中秋節快樂！